import React, { useState } from 'react';
import { Divider, ColorPicker, Button, type MenuProps, Dropdown, Space, Avatar } from 'antd';
import Icon, {
    SunOutlined,
    MoonOutlined,
    UserOutlined
} from '@ant-design/icons';
import { PresetsItem } from 'antd/es/color-picker/interface';
import Span from '@/components/span';
import SvgIcon from "@/components/svgicon";
import { useEnvStore } from '@/stores/env';
import { useShallow } from 'zustand/react/shallow';
import { useDebounceCallback } from '@/utils/hook';
import { Color } from 'antd/es/color-picker';
import i18n from '@/locales'
const colorPresets: PresetsItem[] = [
    {
        label: 'Preset',
        colors: ['#1677FF', '722ED1', '13C2C2', '52C41A', 'EB2F96', 'F5222D', 'FA8C16', 'FADB14', 'FA541C', '2F54EB', 'FAAD14', 'A0D911', '000000'],
    },
]


const App: React.FC = () => {
    const t = i18n.t
    const { langName, themeName, setThemeColor, getThemeColor, setLangName, setThemeName } = useEnvStore(useShallow((state) => ({
        langName: state.langName,
        themeName: state.themeName,
        setThemeColor: state.setThemeColor,
        getThemeColor: state.getThemeColor,
        setLangName: state.setLangName,
        setThemeName: state.setThemeName,
    })))
    const items: MenuProps['items'] = [
        {
            key: '1',
            label: t('nav.info'),
        },
        {
            key: '2',
            label: t('nav.editpwd'),
        },
        {
            key: '4',
            danger: true,
            label: t('nav.logot'),
        },
    ];
    const langItems: MenuProps['items'] = [
        {
            key: 'system',
            label: t('env.system'),
            icon: <Icon component={()=><SvgIcon name='lang' />}></Icon>,
            onClick: () => { setLangName() },
        },
        {
            key: 'zh-CN',
            label: t('lang.zh'),
            icon: <Icon component={()=><SvgIcon name='zh' size="14" />}></Icon>,
            onClick: () => { setLangName('zh-CN') },
        },
        {
            key: 'en-US',
            label: t('lang.en'),
            icon: <Icon component={()=><SvgIcon name='en' size="14" />}></Icon>,
            onClick: () => { setLangName('en-US') },
        },
    ];

    const themeItems: MenuProps['items'] = [
        {
            key: 'system',
            label: t('env.system'),
            icon: <Icon component={()=><SvgIcon name='theme' />} className='text-lg' />,
            onClick: () => { setThemeName() },
        },
        {
            key: 'light',
            label: t('env.light'),
            icon: <SunOutlined />,
            onClick: () => { setThemeName('light') },
        },
        {
            key: 'dark',
            label: t('env.dark'),
            icon: <MoonOutlined />,
            onClick: () => { setThemeName('dark') },
        },
    ];
    return (
        <section className='mr-6 grow flex justify-end items-center'>
            <Divider type="vertical" className='h-5 mx-1' />
            <ColorPicker size='small' className='mx-1' disabledAlpha
                presets={colorPresets} defaultValue={getThemeColor()}
                onChange={useDebounceCallback((color: Color) => setThemeColor(color.toHexString()))} />
            <Divider type="vertical" className='h-5 mx-1' />
            <Dropdown menu={{ items: langItems, selectedKeys: [langName ?? 'system'] }}
                placement={'bottom'} arrow>
                <Button className='px-2' type="text">
                    <Icon component={()=><SvgIcon name='lang' />} className='text-lg' />
                </Button>
            </Dropdown>
            <Divider type="vertical" className='h-5 mx-1' />
            <Dropdown menu={{ items: themeItems, selectedKeys: [themeName ?? 'system'] }}
                placement={'bottom'} arrow>
                <Button className='px-2' type="text">
                <Icon component={()=><SvgIcon name='theme' />} className='text-lg' />
                </Button>
            </Dropdown>

            <Divider type="vertical" className='h-5 mx-1' />
            
            <Dropdown menu={{ items }}>
                <a onClick={(e) => e.preventDefault()}>
                    <Space>
                        <Avatar size="large" icon={<UserOutlined />} />
                        <Span>admin</Span>
                    </Space>
                </a>
            </Dropdown>
        </section>
    );
};

export default App;